<template>
  <div class="container" ref="container">
    <van-nav-bar @click-left="back">
      <van-icon size="20" name="arrow-left" slot="left" color="rgb(150, 151, 153)"/>
      <p slot="title" style="font-size: 14px">订单列表</p>
    </van-nav-bar>
    <van-tabs v-model="active">
      <van-tab title="已下单">
        <div class="box" ref="order">
          <van-card
              class="goods-card"
              v-for="(item) in orderList"
              @click-thumb="showDetail('/shopDetail/'+item.proid)"
              :key="item.orderid"
              :price="Math.floor(item.originprice*item.discount/10).toFixed(2)"
              :title="item.proname"
              :thumb="item.img1"
          >
            <template #tags>
              <div style="margin-top: 5px">
                <van-tag plain color="#ffe1e1" text-color="#ad0000">{{ item.size + '码' }}</van-tag>
                <van-tag plain color="#ffe1e1" text-color="#ad0000" style="margin-left:5px">{{
                    'x' + item.count
                  }}
                </van-tag>
              </div>
            </template>
            <template #footer>
              <van-button type="danger" size="small" @click="showOrderDetail($event,item.orderid)"
              >查看详情
              </van-button>
              <van-button style="margin-left: 5px" plain type="danger" size="small"
                          @click="returnPro($event,item.orderid)">申请退货
              </van-button>
            </template>
          </van-card>
          <van-empty v-if="orderList.length===0" description="这里什么也没有"/>
        </div>
      </van-tab>
      <van-tab title="已发货">
        <div class="box" ref="send">
          <van-card
              class="goods-card"
              v-for="(item) in sendList"
              @click-thumb="showDetail('/shopDetail/'+item.proid)"
              @click="showOrderDetail($event,item.orderid)"
              :key="item.orderid"
              :desc="item.msg"
              :price="Math.floor(item.originprice*item.discount/10).toFixed(2)"
              :title="item.proname"
              :thumb="item.img1"
          >
            <template #tags>
              <div style="margin-top: 5px">
                <van-tag plain color="#ffe1e1" text-color="#ad0000">{{ item.size + '码' }}</van-tag>
                <van-tag plain color="#ffe1e1" text-color="#ad0000" style="margin-left:5px">{{
                    'x' + item.count
                  }}
                </van-tag>
              </div>
            </template>
            <template #footer>
              <van-button type="danger" size="small" @click="confirmPro($event,item.orderid)">确认收货</van-button>
              <van-button style="margin-left: 5px" plain type="danger" size="small"
                          @click="returnPro($event,item.orderid)">商品退货
              </van-button>
            </template>
          </van-card>
          <van-empty v-if="sendList.length===0" description="这里什么也没有"/>
        </div>
      </van-tab>
      <van-tab title="已完成">
        <div class="box" ref="complete">
          <van-card
              class="goods-card"
              v-for="(item) in completeList"
              @click-thumb="showDetail('/shopDetail/'+item.proid)"
              @click="showOrderDetail($event,item.orderid)"
              :key="item.orderid"
              :price="Math.floor(item.originprice*item.discount/10).toFixed(2)"
              :title="item.proname"
              :thumb="item.img1"
          >
            <template #tags>
              <div style="margin-top: 5px">
                <van-tag plain color="#ffe1e1" text-color="#ad0000">{{ item.size + '码' }}</van-tag>
                <van-tag plain color="#ffe1e1" text-color="#ad0000" style="margin-left:5px">{{
                    'x' + item.count
                  }}
                </van-tag>
              </div>
            </template>
            <template #footer>
              <van-button v-if="!item.comment" type="danger" size="small"
                          @click="commentPro($event,item.proid,item.orderid)">评价商品
              </van-button>
              <van-button v-else type="danger" size="small" @click="comments($event)">已评价</van-button>
              <van-button style="margin-left: 5px" plain type="danger" size="small"
                          @click="returnPro($event,item.orderid)">申请退货
              </van-button>
            </template>
          </van-card>
          <van-empty v-if="completeList.length===0" description="这里什么也没有"/>
        </div>
      </van-tab>
      <van-tab title="退换中">
        <div class="box" ref="returning">
          <van-card
              class="goods-card"
              v-for="(item) in returningList"
              @click-thumb="showDetail('/shopDetail/'+item.proid)"
              :key="item.orderid"
              :price="Math.floor(item.originprice*item.discount/10).toFixed(2)"
              :title="item.proname"
              :thumb="item.img1"
          >
            <template #tags>
              <div style="margin-top: 5px">
                <van-tag plain color="#ffe1e1" text-color="#ad0000">{{ item.size + '码' }}</van-tag>
                <van-tag plain color="#ffe1e1" text-color="#ad0000" style="margin-left:5px">{{
                    'x' + item.count
                  }}
                </van-tag>
              </div>
            </template>
            <template #footer>
              <van-button type="danger" size="small" @click="showOrderDetail($event,item.orderid)">查看详情</van-button>
            </template>
          </van-card>
          <van-empty v-if="returningList.length===0" description="这里什么也没有"/>
        </div>
      </van-tab>
      <van-tab title="已退货">
        <div class="box" ref="returns">
          <van-card
              class="goods-card"
              v-for="(item) in returnList"
              @click-thumb="showDetail('/shopDetail/'+item.proid)"
              :key="item.orderid"
              :price="Math.floor(item.originprice*item.discount/10).toFixed(2)"
              :title="item.proname"
              :thumb="item.img1"
              :desc="item.msg"
          >
            <template #tags>
              <div style="margin-top: 5px">
                <van-tag plain color="#ffe1e1" text-color="#ad0000">{{ item.size + '码' }}</van-tag>
                <van-tag plain color="#ffe1e1" text-color="#ad0000" style="margin-left:5px">{{
                    'x' + item.count
                  }}
                </van-tag>
              </div>
            </template>
            <template #footer>
              <van-button type="danger" size="small" @click="showOrderDetail($event,item.orderid)">查看详情</van-button>
            </template>
          </van-card>
          <van-empty v-if="returnList.length===0" description="这里什么也没有"/>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from 'vue'
import { Tab, Tabs, Card, Tag } from 'vant'
import { requestGetOrderByState, requestGetIt, requestReturn } from '../../api/order'
import $throttle from '../../../public/js/speed'

Vue.use(Tab)
Vue.use(Tabs)
Vue.use(Card)
Vue.use(Tag)

export default {
  name: 'Keep',
  data () {
    return {
      active: 0,
      once: true,
      orderList: [],
      sendList: [],
      completeList: [],
      returningList: [],
      returnList: []
    }
  },
  mounted () {

  },
  activated () {
    this.$refs.container.scrollTop = localStorage.getItem('orderList') || 0
    this.loadData()
  },
  methods: {
    back () {
      this.$router.back()
    },
    scroller (type) {
      console.log(this.$refs[type])
      this.$refs[type].addEventListener('scroll', () => {
        $throttle(() => {
          localStorage.setItem('orderList', this.$refs[type].scrollTop)
        }, 300)
      })
    },
    showDetail (path) {
      this.$router.push(path)
    },
    showOrderDetail (e, orderid) {
      if (e.target.tagName.toLowerCase() === 'img') {
        return
      }
      this.$router.push('/orderDetail/' + orderid)
      console.log('show', orderid)
      e.cancelBubble = true
      e.stopPropagation()
    },
    confirmPro (e, orderid) {
      console.log(orderid)
      this.$dialog.confirm({
        title: '提示',
        message: '确认收货？',
      }).then(() => {
        requestGetIt(orderid).then(() => {
          this.loadData()
          this.$toast.success({
            message: '确认收货'
          })
        })
      })
      e.cancelBubble = true
      e.stopPropagation()
    },
    returnPro (e, orderid) {
      console.log(orderid)
      this.$dialog.confirm({
        title: '提示',
        message: '您真的要退货嘛？'
      }).then(() => {
        requestReturn(orderid).then(() => {
          this.$toast.success({
            message: '退货申请提交'
          })
          this.loadData()
        })
      })
      e.cancelBubble = true
      e.stopPropagation()
    },
    commentPro (e, proid, orderid) {
      this.$router.push('/comments/' + proid + '?orderid=' + orderid)
      e.cancelBubble = true
      e.stopPropagation()
    },
    comments (e) {
      e.cancelBubble = true
      e.stopPropagation()
    },
    loadData () {
      requestGetOrderByState(this.active).then(res => {
        switch (this.active) {
          case 0:
            this.orderList = res.data
            break
          case 1:
            this.sendList = res.data
            break
          case 2:
            this.completeList = res.data
            break
          case 3:
            this.returningList = res.data
            break
          case 4:
            this.returnList = res.data
            break
          default:
            console.log('default')
        }
        if (this.once) {
          this.scroller('container')
          this.once = false
        }
      })
    }
  },
  watch: {
    active () {
      this.loadData()
    }
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
  overflow: auto;
}

.goods-card {
  margin: 0;
  padding-top: 15px;
  background-color: #fff;
  text-align: left;
  border-bottom: 1px solid #f5f5f5;
}

.van-card__desc {
  font-size: 12px;
}

.box {
  height: calc(100vh - 90px);
}
</style>
